<template> 
    <div class="detaileddisplay">
        <el-page-header @back="goBack" content="详情页面">
        </el-page-header>
        <!-- 空状态 -->
        <el-skeleton style="width:600px" :loading="loading" animated :count="1" class="showmsg">
            <template slot="template">
                <el-skeleton-item
                variant="image"
                style="width: 400px; height: 267px;"
                />
                <div style="padding: 14px;">
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <div
                    style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
                >
                    <el-skeleton-item variant="text" style="margin-right: 16px;" />
                    <el-skeleton-item variant="text" style="width: 30%;" />
                </div>
                </div>
            </template>
            <template>
                <el-card
                :body-style="{ padding: '0px', marginBottom: '1px' }"
                v-for="item in lists"
                :key="item.name"
                >
                <el-image
                    :style="{'margin-top':'30px'}"
                    @click="skiproute(o)"
                    style="width: 80%; height: 600px"
                    :src="item.imgUrl"
                    class="image multi-content"
                    fit="cover">
                </el-image>
                <!-- <img :src="item.imgUrl"  /> -->
                <div style="padding: 14px;">
                    <span>{{ item.name }}</span>
                    <div class="show">
                        <span>价格:{{ item.appraisedvalue }}</span>
                    </div>
                    <div class="bottom card-header">
                    <span class="time">发行时间:{{ $route.query.time }}</span>
                    <template>
                        <el-popconfirm
                        confirm-button-text='是的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        @confirm="changeflag"
                        icon-color="red"
                        title="确定转让嘛,以后它不是你的了"
                        >
                        <el-button slot="reference" type="success" :disabled="!flag">转让</el-button>
                        </el-popconfirm>
                    </template>
                    <template>
                        <el-popconfirm
                        confirm-button-text='好的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        @confirm="purchase"
                        title="确定购买嘛,要付钱的"
                        >
                        <el-button slot="reference" type="success">删除</el-button>
                        </el-popconfirm>
                    </template>
                    </div>
                </div>
                </el-card>
            </template>
        </el-skeleton>
        <!-- 手机表单 -->
        <div class="formmsg" :style="{visibility:colbutton}">
            <el-input v-model="tradeid" placeholder="请输入转让地址" class="inp"></el-input>
            <div class="buttoncontr">
                <el-button type="success" plain  @click="purchase">确认转让</el-button>
                <el-button type="info" plain @click="cancel">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';

export default {
    // 详情展示页面
    name:'mydetaileddisplay',
    data() {
        return {
            loading: true,
            lists: [],
            show:'visible',
            disshow:'hidden',
            flag:true,
            tradeid:''
        };
    },
    mounted() {
      this.loading = false
      this.lists = [
        {
          imgUrl:"http://hatelys.vipgz1.91tunnel.com/trade/hdfsimg/"+this.$route.query.name,
          name: this.$route.query.name,
          appraisedvalue:this.$route.query.appraisedvalue
        },
      ]
    },
    methods: {
      setLoading() {
        this.loading = true
        setTimeout(() => (this.loading = false), 2000)
      },
      goBack() {
        this.$router.push({
            path:'/ceshi/myassets'
        })
      },
      purchase(){
        // // 判断用户信息 对用户身份进行验证
        var usemsg = window.localStorage.getItem('userid')
        console.log(this.$route.query.id);
        console.log(this.tradeid);
        if(usemsg == this.tradeid){
            alert("这是你自己的id")
        }else{
             // 传递信息主体
             var datamain = JSON.stringify({
                "assetId":this.$route.query.id,
                "buyer":this.tradeid,
            })
            axios({
                method:"post",
                url:"http://hatelys.vipgz1.91tunnel.com/operate/tradingassets",
                data:datamain,
                headers:{
                    'Content-Type':'application/json;charset=UTF-8',
                    'Authorization':'Bearer '+localStorage.getItem('token')
                }
            }).then(resp=>{ 
               alert("交易成功")
            })
        }
      },
      cancel(){
        this.flag = !this.flag
      },
      changeflag(){
        this.flag = !this.flag
      }
    },
    computed:{
        colbutton(){
            return this.flag ? this.disshow : this.show 
        }
    }
}
</script>

<style>
.detaileddisplay{
    display: flex;
    height: 800px;
    width: 100%;
}

.showmsg{
    margin: auto;
}

.buttoncontr{
    width: 300px;
    height: 300px;
}
.inp{
    width: 270px;
}
.formmsg{
    margin-top: 670px;
}
</style>    